<template>
	<view id="containner">
		<view style="height: 225px;">
			<video id="myVideo" :src="path" @timeupdate="timeUpdate" @error="videoErrorCallback" :show-loading="true"
				:danmu-list="danmuList" enable-danmu danmu-btn controls @loadedmetadata="showLoading=false">
				<dialog v-if="showLoading" style="background-color: white; border: 1px solid gray;">
					<p>视频加载中...</p>
				</dialog>
			</video>
		</view>
		<!-- <video id="myVideo" :src="path" @timeupdate="timeUpdate" @error="videoErrorCallback" :show-loading="true"
			:danmu-list="danmuList" enable-danmu danmu-btn controls @loadedmetadata="onLoadedMetadata">
			<dialog v-if="showLoading" style="background-color: white; border: 1px solid gray;">
				<p>视频加载中...</p>
			</dialog>

		</video> -->


		<view class="detail">
			<view class="title">
				{{ detail.title }}
			</view>
			<view class="bottom">
				<view style="color: #999;">主讲人: <text v-for="item in detail.teacherList"
						style="color: #999;">{{ item.name }}</text> </view>
				<text style="color: #999;">{{ detail.begin_time }}</text>
			</view>
		</view>
		<view style="background-color: #f8f8f8;height: 20rpx;">

		</view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#3476f0"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<uni-row class="demo-uni-row" :gutter="20">
					<uni-col :span="7">
						<view class="label">标题</view>
					</uni-col>
					<uni-col :span="16">
						<view class="value">{{ detail.title }}</view>
					</uni-col>
					<uni-col :span="7">
						<view class="label">主讲人</view>
					</uni-col>
					<uni-col :span="16">
						<view class="value"><text v-for="item in detail.teacherList">{{ item.name }}</text> </view>
					</uni-col>
					<uni-col :span="7">
						<view class="label">类型</view>
					</uni-col>
					<uni-col :span="16">
						<view class="value">
							{{ detail.category_id_text }}
						</view>
					</uni-col>
					<uni-col :span="7">
						<view class="label">开始时间</view>
					</uni-col>
					<uni-col :span="16">
						<view class="value">{{ detail.begin_time }}</view>
					</uni-col>
					<uni-col :span="7">
						<view class="label">课程描述</view>
					</uni-col>
					<uni-col :span="16">
						<view class="value">{{ detail.description }}</view>
					</uni-col>
				</uni-row>
			</view>
			<view v-show="current === 1">
				<uni-collapse>
					<uni-collapse-item v-for="(item,index) in list" :key="index" :title="item.name" :open="true">
						<view class="list" v-for="(e,index) in item.hourList" :key="index" @click="videoClick(e)"
							:class="detailId === e.id ? 'active': ''">
							{{ e.title }}
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getone,
		updateCourse
	} from "@/api/course.js";
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		onLoad: function(option) {
			let that = this;
			if(option.projectId){
				this.project_id = option.projectId
				console.log("接受到的项目id",this.project_id);
			}
			getone({
				id: option.id
			}).then(res => {
				that.detail = res;
				that.list = res.courseList;
				// 初始化视频
				that.path = res.courseList[0].hourList[0].video.media_url;
				that.detailId = res.courseList[0].hourList[0].id;
			})
			this.$refs.popup.open()
		},
		data() {
			return {
				detail: {},
				detailId: 0, // hourList ID
				list: [],
				items: ['详情', '目录'],
				current: 0,
				active: 0,
				time: true,
				path: "",
				showLoading: true,
				project_id:null
			};
		},
		methods: {
			// 250毫秒出发一次方法  5秒向服务端发送一次请求
			timeUpdate(time) {
				if (this.time) {
					this.time = false;
					let that = this;
					console.log("项目id",this.project_id);
					if(!this.project_id){
						setTimeout(() => {
							console.log(Number(this.project_id),this.detail.id);
							updateCourse({
								course_id: this.detail.id,
								course_hour_id: this.detailId,
								progress: time.detail.currentTime
							}).then((res) => {
								console.log(res)
							})
							that.time = true;
						}, 5000)
					}else{
						setTimeout(() => {
							console.log(Number(this.project_id),this.detail.id);
							updateCourse({
								project_id:Number(this.project_id),
								course_id: this.detail.id,
								course_hour_id: this.detailId,
								progress: time.detail.currentTime
							}).then((res) => {
								console.log(res)
							})
							that.time = true;
						}, 5000)
					}
				}
			},
			videoClick(e) {
				this.path = e.video.media_url;
				this.detailId = e.id;
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			group(val) {
				this.active = val;
			},
			Class(val) {
				this.active = val;
			},
		}
	};
</script>


<style scoped lang="scss">
	.loading {
		text-align: center;
		font-size: 20px;
	}

	.spinner {
		width: 50px;
		height: 50px;
		margin: 20px auto;
		border-radius: 50%;
		border: 5px solid rgba(0, 0, 0, 0.1);
		border-top-color: #3498db;
		animation: spin 1s ease-in-out infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>

<style scoped lang="scss">
	@import '../../static/font.scss';
	.bar {
		background-color: #fff;
		padding: 10px;
		display: flex;
		justify-content: space-between;

		.left {
			image {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				vertical-align: middle;
			}
		}
	}

	#myVideo {
		width: 100%;
	}

	.foot {
		box-sizing: border-box;
		width: 100%;
		bottom: 0upx;
		padding: 20upx;
		position: fixed;
		background: #FFFFFF;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx -5rpx 14rpx #e3e6e6;
		bottom: constant(safe-area-inset-bottom);
	}

	.detail {
		background-color: #FFFFFF;

		.title {
			font-size: $uni-text-size-md;
		}

		padding: 10px;

		.bottom {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.label {
		text-align: right;
		color: $uni-text-color-grey;
		margin-top: 15px;
	}

	.value {
		margin-top: 15px;
	}

	.active {
		color: $uni-color-primary;
	}

	.list {
		margin: 15px;
		margin-top: 0;
	}
</style>
